<template>
	<view>
		<a-map-walking
		    :startPoint="startPoint"
		    :endPoint="endPoint"
		    style="width: 750rpx;
		    height: 100vh"
		></a-map-walking>
		<view class="positop ffffff mainpadding">
			<text class="main_size bold hei_text">{{dataAll.order_no}}</text>
			<view class="flexbetween margin_top1 flexrow">
				<text class="xiaolan" v-if="dataAll.type!=4">现在出发</text>
				<text class="xiaolan" v-if="dataAll.type==4">{{dataAll.cf_time}}出发</text>
				<!-- <text class="xiaolan">距离23km</text> -->
			</view>
			<view class="margin_top1" v-if="dataAll.type!=2">
				<text class="xiaohui">出发地：{{dataAll.start_address}}</text>
			</view>
			<view class="margin_top1" v-if="dataAll.type==4">
				<text class="xiaohui">目的地：{{dataAll.end_address}}</text>
			</view>
		</view>
		<text class="duijiang" v-if="dataAll.type!=2" @click="phone(dataAll.user.mobile)">呼叫</text>
		<text class="duijiang" v-if="dataAll.type==2" @click="phone(dataAll.ccr_mobile)">呼叫</text>
		<text class="duijiang1" @click="daohang" v-if="dataAll.type!=2">导航</text>
		<view class="posibottom mainpadding ffffff" style="border-radius: 20rpx 20rpx 0 0;padding-bottom: 50rpx;">
			<view class="submitbtn" v-if="dataAll.status==20" @click="shangche">确认用户上车</view>
			<view class="submitbtn" v-if="dataAll.status==30" @click="xiache()">确认用户下车</view>
			<view class="submitbtn" v-if="dataAll.status==40" @click="modalSure">订单完成</view>
		</view>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	import AMapWalking from "@/components/a-map-walking.vue";
	const httpRequest = require("@/common/httpRequest.js")
	const ttAMapNavi = uni.requireNativePlugin('TT-AMapNavi');
	ttAMapNavi.initParams({
	    androidKey: 'ceabc0375ecdb7f3198b0b1f749ad63e',
	    iOSKey: 'ceabc0375ecdb7f3198b0b1f749ad63e'
	});
	export default {
		components: { AMapWalking },
		data() {
			return {
				listid: "",
				dataAll: {},
				modal: {
					modalShow: false,
					title: "是否确认完成订单？",
				},
				start_longitude:"",
				start_latitude:"",
				start_address:"",
				startPoint: [],
				endPoint: [],
			}
		},
	
		onLoad(options) {
			this.listid = options.id
			this.getdetail()
			this.getlocation()
			// this.getDriverLine()
		},
		methods: {
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log(res, 999);
						_this.start_latitude = res.latitude
						_this.start_longitude = res.longitude
						_this.startPoint = [res.longitude,res.latitude]
						_this.start_address = res.address.province + res.address.city + res.address.district +
							res.address.street + res.address.streetNum + res.address.poiName
					},
					fail(err) {
						httpRequest.toast("获取经纬度失败，请打开定位重试")
					}
				});
			},
			daohang(){
				let _this = this
				ttAMapNavi.startNavi({
				    // 起点（只支持传入一个），选填，不传使用当前位置
				    startPoints: [{
				        name: _this.start_address,
				        latitude: _this.start_latitude,
				        longitude: _this.start_longitude
				    }],
				    // 终点（只支持传入一个）
				    endPoints: [{
				        name: _this.dataAll.start_address,
				        latitude: _this.dataAll.start_latitude,
				        longitude: _this.dataAll.start_longitude
				    }],
				    // 途径点（最多支持三个），选填
				    wayPoints: [],
				    // 驾车路径规划策略
				    drivingStrategy: 10,
				    // 是否直接进入导航界面（跳过路径规划页面）
				    naviDirectly: false,
				    // 导航组件的主题皮肤类型
				    themeType: 1
				});
			},
			shangche() {
				httpRequest.request('/api/order/cgsc', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						this.getdetail()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			xiache() {
				httpRequest.request('/api/order/cgxc', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						this.getdetail()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			modalSure() {
				if (this.modal.title == "是否确认完成订单？") {
					httpRequest.request('/api/order/qrwc', 'GET', {
						id: this.listid
					}, false, false, true).then(res => {
						httpRequest.toast(res.msg);
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
				}
				this.modalcancel()
			},
			modalcancel() {
				this.modal.modalShow = false
			},
			getdetail() {
				httpRequest.request('/api/order/detail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					if(this.dataAll.status==20){
						this.endPoint = [res.data.start_longitude,res.data.start_latitude]
					}else{
						this.startPoint = []
						this.endPoint = []
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getDriverLine() {
				const that = this;
				//这个key是在高德导航app上申请的web路线规划
				const key = "e0a77cd448f195bfd45af9f680b7b927";
				//起点坐标
				const origin = "34.83172,113.52446";
				//给起点坐标一个图标
				this.startingPointt()
				//给终点坐标一个图标
				this.endPoint()
				//终点坐标
				const destination = "34.83172,113.53446";
				uni.request({
					url: `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&key=${key}`,
					success: (res) => {
						console.log(res, "获取的位置信息");
						const data = res.data.route;
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								//将每一步的数据放到points数组中
								var poLen = steps[i].polyline.split(";");
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(",")[0]),
										latitude: parseFloat(poLen[j].split(",")[1]),
									});
								}
							}
							console.log(data.paths[0].steps[0].instruction)
							// //这个是我用来测试的，指的是开始导航之后的要走的第一步路
							// that.runningRoute = data.paths[0].steps[0].instruction;
							// console.log('行驶路线-----------', that.runningRoute)
						}
						//这个就是走的路，下面有几个属性在app上不支持
						that.polyline = [{
							points: points,
							color: "#0091ff",
							dottedLine: true,
							width: 15,
							arrowLine: true,
							colorList: true,
						}, ];
					},
					fail: function(res) {
						console.log("获取路线失败", res);
					},
				});
			},
			// 规划路线的时候给起点一个marker，
			startingPointt() {
				let point = [{
					id: 1,
					width: 40,
					height: 40,
					latitude: 34.83172,
					longitude: 113.52446,
					iconPath: "@/static/image/system/pass.png",
					anchor: {
						x: 0.5,
						y: 1,
					},
				}, ];
				this.markers = this.markers.concat(point);
			},
			// 规划路线的时候给终点一个marker，
			endPoint() {
				let point = [{
					id: 2,
					width: 40,
					height: 40,
					latitude: 34.83172,
					longitude: 113.53446,
					iconPath: "@/static/image/system/pass.png",
					anchor: {
						x: 0.5,
						y: 1,
					},
				}, ];
				this.markers = this.markers.concat(point);
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.duijiang {
		background-color: #3478f5;
		color: #ffffff;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		line-height: 120rpx;
		text-align: center;
		position: fixed;
		bottom: 400rpx;
		right: 30rpx;
		z-index: 100;
	}
	.duijiang1 {
		background-color: #3478f5;
		color: #ffffff;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		line-height: 120rpx;
		text-align: center;
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;
		z-index: 100;
	}

	.duijiang:active {
		background-color: rgba(52, 120, 245, .8);
		color: #fff;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		line-height: 120rpx;
		text-align: center;
	}

	.itemimgBox {
		width: 170rpx;
		position: relative;
	}

	.listleftimg2 {
		width: 110rpx;
		height: 110rpx;
	}

	.pdl {
		padding-bottom: 30rpx;
		/* border-bottom: 1rpx solid rgba(0, 0, 0, .03); */
		border-width: 1rpx;
		border-style: solid;
		border-top-color: #fff;
		border-left-color: #fff;
		border-right-color: #fff;
		border-bottom-color: rgba(0, 0, 0, .03);
	}

	.textcenter {
		text-align: center;
	}

	/* 提交按钮 */
	// .submitbtn {
	// 	width: 690rpx;
	// 	background-color: #3478f5;
	// 	border-radius: 50rpx;
	// 	text-align: center;
	// 	color: #fff;
	// 	padding: 20rpx 0;
	// }

	.lan_text {
		color: #3478f5;
	}

	.main_size {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.bold {
		font-weight: bold;
	}

	.margin_right {
		margin-right: 30rpx;
	}

	.flexbetween {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flexleft {
		display: flex;
		align-items: center;
	}

	.flexright {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.flexaround {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.ffffff {
		background-color: #fff;
	}

	.flexrow {
		flex-direction: row;
	}

	.positop {
		position: fixed;
		/* #ifdef H5 */
		top: 120rpx;
		/* #endif */
		/* #ifdef APP-PLUS || MP-WEIXIN */
		top: 30rpx;
		/* #endif */
		left: 10rpx;
		width: 730rpx;
		border-radius: 20rpx;
	}

	.posibottom {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 750rpx;
		border-radius: 20rpx 20rpx 0 0;

	}

	.bottomcontent {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #3478f5;
	}

	.orderline {
		width: 1rpx;
		height: 20rpx;
		background-color: rgba(255, 255, 255, .6);
	}

	.payline {
		border-width: 1rpx;
		border-style: solid;
		border-top-color: rgba(255, 255, 255, .3);
		border-left-color: #3478f5;
		border-right-color: #3478f5;
		border-bottom-color: rgba(255, 255, 255, .3);
		padding: 30rpx 50rpx;
	}

	.listimg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
</style>